<template>
  <div>
    <el-collapse v-model="activeNames">
      <el-collapse-item title="功能" name="1">
        <el-row :gutter="20">
          <el-col span="2">
            <el-card :class="trigger===0? 'content_center act' : 'content_center'" @click="trigger=0">
              <el-icon>
                <Tools/>
              </el-icon>
              <div>
                系统
              </div>
            </el-card>
          </el-col>
          <el-col span="2">
            <el-card style="text-align: center" :class="trigger===1? 'content_center act' : 'content_center'"
                     @click="trigger=1">
              <el-icon>
                <Avatar/>
              </el-icon>
              <div>
                访问
              </div>
            </el-card>
          </el-col>
          <el-col span="2">
            <el-card class="content_center" :class="trigger===2 ? 'content_center act' : 'content_center'"
                     @click="trigger=2">
              <el-icon>
                <Ticket/>
              </el-icon>
              <div>
                交易
              </div>
            </el-card>
          </el-col>
          <el-col span="2">
            <el-card class="content_center" :class="trigger===3 ? 'content_center act' : 'content_center'"
                     @click="trigger=3">
              <el-icon>
                <List/>
              </el-icon>
              <div>
                待办
              </div>
            </el-card>
          </el-col>
          <el-col span="2">
            <el-card class="content_center" :class="trigger===4 ? 'content_center act' : 'content_center'"
                     @click="trigger=4">
              <el-icon>
                <Comment/>
              </el-icon>
              <div>
                消息
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>
  </div>
  <div style="display: flex;justify-content: start;" v-if="trigger===0">
    <div>
      <el-card style="width: 480px">
        <template #header>
          <div class="card-header">
            <span style="font-weight: 800">简介</span>
          </div>
        </template>
        <div>
          轻松购系统是一个小白的毕业设计。是一个将后台管理，前台商城系统集于一体的商城系统。
        </div>
      </el-card>
    </div>
    <el-divider direction="vertical" border-style="none"></el-divider>
    <div>
      <div>
        <el-card style="width: 480px">
          <template #header>
            <div class="card-header">
              <span style="font-weight: 800">系统公告</span>
            </div>
          </template>
          <div>
            <div v-for="item in bulletins">
              标题：
              <span>
                  {{ item.title }}
                </span>
              <p>
                内容: {{ item.content }}
              </p>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
  <div v-else-if="trigger===1">
    <user-statistic></user-statistic>
  </div>
  <div v-else-if="trigger===2">
    <trade-statistic></trade-statistic>
  </div>
</template>

<script setup>
import {usingBulletin} from '@/api/home/communication/annouce'
import {onMounted, ref} from "vue";
import UserStatistic from "@/components/index/userStatistic";
import TradeStatistic from "@/components/index/tradeStatistic";

let bulletins = ref([])
let trigger = ref(0)
let activeNames=ref(1)

function getBulletins() {
  usingBulletin().then(res => {
    bulletins.value = res.data
  })
}

onMounted(() => {
  getBulletins()
})

</script>

<style scoped>
.content_center {
  text-align: center;
}

.act {
  background-color: #098CC0;
}
</style>
